<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
  #stage {
    width: 1000px;
    height: 600px;
    /*border: 1px solid;*/
    /*-webkit-perspective: 500;*/
    /*perspective-origin: 25% 75%;*/
  }

  #container {
    -webkit-transform-style: preserve-3d;
    position: relative;
    width: 300px;
    height: 300px;
    /*border: 1px solid;*/
  }
  
  a {
    position: absolute;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
</style>

<div id='stage'>
  <div id='container'>
  </div>
</div>

<script src='js/vector.js'></script>
<script type="text/javascript">
  // config data
  var array = [
    'js',
    'html',
    'css',
    'css3',
    'python',
    'java',
    'php',
    'c',
    'c++',
    'go',
    'vbs',
    'vb',
    'c#',
    'perl',
    'sql',
    'ruby',
    'swift',
    'pascal',
    'lua',
    'chrome',
    'github',
    'firefox',
    'mysql',
    'jquery',
  ];

  window.angleX = 0;
  window.angleY = 0;
  window.tags = [];

  function Tag(v, index) {
    this.a = document.createElement('a');;
    this.a.href = 'http://www.cnblogs.com/zichi/';
    this.a.target= '_blank';
    this.a.innerHTML = array[index];
    array.splice(index, 1);
    this.pos3 = v;
    this.pos2 = new Vector2();
    this.r = Math.floor(Math.random() * 255);
    this.g = Math.floor(Math.random() * 255);
    this.b = Math.floor(Math.random() * 255); 
    this.show();
    document.getElementById('container').appendChild(this.a);
  }

  Tag.prototype.getPos2 = function() {
    focalLength = 300;
    var scale = focalLength / (focalLength + this.pos3.z);
    this.pos2.x = 150 + this.pos3.x * scale;
    this.pos2.y = 150 + this.pos3.y * scale;
    this.a.style.fontSize = 12 * scale;
    this.a.style.color = 'rgba('+this.r+','+this.g+','+this.b+','+ Math.min(1, scale)+')';
  };

  Tag.prototype.show = function() {
    this.getPos2();
    this.a.style.left = this.pos2.x;
    this.a.style.top = this.pos2.y;
  };

  // setListener
  document.getElementById('container').addEventListener("mousemove" , function(event){
    var x = event.clientX - 200;
    var y = event.clientY - 200;
    window.angleY = -x * 0.0001;
    window.angleX = y * 0.0001;
  });

  setInterval(function() {
    for(var i = 0; i < tags.length; i++) {
      tags[i].pos3.rotateX(angleX);
      tags[i].pos3.rotateY(angleY);
      tags[i].show();
    }
  }, 1000 / 60);

  var all = array.length;
  for(var i = 1; i <= all; i++) {
    var r = 100;
    var a1 = Math.acos(1 - (2 * i) / all);
    var a2 = a1 * Math.sqrt(all * Math.PI);
    var x = r * Math.sin(a1) * Math.cos(a2);
    var y = r * Math.sin(a1) * Math.sin(a2);
    var z = r * Math.cos(a1);

    var v = new Vector3(x, y, z);
    var index = ~~(Math.random() * array.length);
    var tag = new Tag(v, index);
    tags.push(tag);
  }
</script>